<template>
    <div class="batch-approval-container">
        <div class="batch-approval">
            <a-breadcrumb separator=">">
                <a-breadcrumb-item @click="goMyToDo">
                    {{ t('myBoard.myToDo') }}
                </a-breadcrumb-item>
                <a-breadcrumb-item>{{ t('processCenter.batchApproval') }}</a-breadcrumb-item>
            </a-breadcrumb>
            <div class="button-group">
                <!-- 批量同意 -->
                <a-button type="primary" class="agree-button" :disabled="disableButton" @click="handBatch('APPROVE')">
                    {{ t('processCenter.batchConsent') }}
                </a-button>
                <!-- 批量拒绝 -->
                <a-button type="primary" class="agree-button" :disabled="disableButton" @click="handBatch('REJECT')">
                    {{ t('processCenter.batchReject') }}
                </a-button>
            </div>
            <a-table
                :columns="columns"
                :row-key="record => record.taskId"
                :data-source="tableData"
                :row-selection="{ selectedRowKeys, onChange: handleChangeSelect }"
            />
        </div>
    </div>
</template>

<script lang="ts">
    import { computed, ref, reactive, onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    import { $getPublishedApplicationId } from '@/utils/common'
    import { useI18n } from 'vue-i18n'
    import { setBatchProcessApproval, getTodoList } from '@/apis/sys/process'
    export default {
        name: 'BatchApproval', // 批量审批
        setup() {
            const { t } = useI18n()
            const router = useRouter()
            const applicationId = $getPublishedApplicationId()
            const params = reactive<PageListQuery<ProcessFilter, ProcessSort>>({
                filter: {
                    applicationId: applicationId
                },
                pageNo: 1,
                pageSize: 10,
                sort: {
                    field: 'urgeTime',
                    direction: 'DESC'
                }
            })
            const columns = reactive<ProcessColumnsItem[]>([
                {
                    title: t('tableColumns.processInstanceName'),
                    align: 'center',
                    dataIndex: 'processInstanceName',
                    ellipsis: true,
                    key: 'processInstanceName',
                    scopedSlots: { customRender: 'processInstanceName' }
                },
                {
                    title: t('tableColumns.taskName'),
                    align: 'center',
                    dataIndex: 'taskName',
                    ellipsis: true,
                    key: 'taskName',
                    scopedSlots: { customRender: 'taskName' }
                },
                {
                    title: t('tableColumns.applyUser'),
                    align: 'center',
                    dataIndex: 'applyUser',
                    ellipsis: true,
                    key: 'applyUser',
                    scopedSlots: { customRender: 'applyUser' }
                },
                {
                    title: t('tableColumns.beginTime'),
                    align: 'center',
                    dataIndex: 'beginTime',
                    ellipsis: true,
                    key: 'beginTime',
                    scopedSlots: { customRender: 'beginTime' }
                },
                {
                    title: t('tableColumns.arrivalTime'),
                    align: 'center',
                    dataIndex: 'arrivalTime',
                    ellipsis: true,
                    key: 'arrivalTime',
                    scopedSlots: { customRender: 'arrivalTime' }
                }
            ])
            const tableData = ref<ProcessPageDataItem[]>([])
            const selectedRowKeys = ref<string[]>([])
            const disableButton = computed(() => {
                return !selectedRowKeys.value.length
            })
            onMounted(() => {
                getTableData()
            })
            // 获得列表数据
            const getTableData = () => {
                getTodoList(params).then(res => {
                    const { content = [] } = res
                    tableData.value = content.map(item => item.approveInfo)
                })
            }
            const goMyToDo = () => {
                // 回到我的待办
                router.push({ name: 'process' })
            }
            const handleChangeSelect = (rowKeys: string[]) => {
                // 多选
                selectedRowKeys.value = rowKeys
            }
            // 批量审批
            const handBatch = (type: string) => {
                const approveTaskList: ProcessApproveTaskListItem[] = selectedRowKeys.value.map(key => {
                    const { processInstanceId, taskId } = tableData.value.find(
                        item => item.taskId === key
                    ) as ProcessPageDataItem
                    const data: ProcessApproveTaskListItem = {
                        processInstanceId,
                        taskId
                    }
                    return data
                })
                setBatchProcessApproval({
                    approveTaskList,
                    applicationId,
                    approveAction: type
                }).then(() => {
                    // 更新列表
                    getTableData()
                })
            }
            return {
                t,
                disableButton,
                columns,
                tableData,
                selectedRowKeys,
                goMyToDo,
                handleChangeSelect,
                handBatch
            }
        }
    }
</script>

<style lang="less" scoped>
    .batch-approval-container {
        height: 100%;
        padding: 20px;
    }

    .button-group {
        margin-top: 10px;
        margin-bottom: 10px;

        .agree-button {
            margin-right: 10px;
        }
    }

    :deep(.@{ant-prefix}-breadcrumb) {
        & > span {
            .@{ant-prefix}-breadcrumb-link {
                color: rgba(0, 0, 0, 0.45);
            }

            .@{ant-prefix}-breadcrumb-separator {
                color: rgba(0, 0, 0, 0.45);
            }
        }

        & > span:last-child {
            .@{ant-prefix}-breadcrumb-link {
                color: rgba(0, 0, 0, 0.85);
            }

            .@{ant-prefix}-breadcrumb-separator {
                color: rgba(0, 0, 0, 0.85);
            }
        }
    }

    :deep(.@{ant-prefix}-btn-primary[disabled]) {
        color: #fff;
        background-color: #bfbfbf;
    }

    :deep(.@{ant-prefix}-table-thead > tr > th) {
        background: #f2f8fc;
    }
</style>

<i18n lang="yaml">
zh-CN:
    myBoard:
        myToDo: 我的待办
    processCenter:
        batchConsent: 批量同意
        batchReject: 批量拒绝
        batchApproval: 批量审批
    tableColumns:
        processInstanceName: 标题
        taskName: 当前节点
        applyUser: 提交人
        beginTime: 发起时间
        arrivalTime: 任务到达时间
en-US:
    myBoard:
        myToDo: My to-do list
    processCenter:
        batchConsent: Batch consent
        batchReject: Batch reject
        batchApproval: Batch approval
    tableColumns:
        processInstanceName: title
        taskName: Current node
        applyUser: submitter
        beginTime: Initiation time
        arrivalTime: Task arrival time
</i18n>
